<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id="app">
    <!-- <input type="text" v-model="name" placeholder="姓名"> -->
    <input type="text" v-model="english" placeholder="英语分数">
    <input type="text" v-model="math" placeholder="数学分数">
    <input type="text" v-model="chinese" placeholder="语文分数">
<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>英语分数</th>
            <th>数学分数</th>
            <th>语文分数</th>
            <th>总分</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item , index) in all" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.fraction_english}}</td>
            <td>{{item.fraction_math}}</td>
            <td>{{item.fraction_chinese}}</td>
            <td>{{item.fraction_english+item.fraction_math+item.fraction_chinese}}</td>
            <td><button @click="del(index)">删除</button>
            <button @click="edit(index)">修改</button></td>
        </tr>
    </tbody>
</table>
<p>平均分:{{pingfen}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            all:[{name:'张三',fraction_english:90,
fraction_math:80,fraction_chinese:70
            },
            {name:'李四',fraction_english:80,
fraction_math:70,fraction_chinese:60
            },
            {name:'王五',
fraction_english:60,fraction_math:50,fraction_chinese:40
            },
            {name:'赵六',
                fraction_english:50,fraction_math:40,fraction_chinese:30
            },
            {name:'钱七',fraction_english:40,fraction_math:30,fraction_chinese:20},
            {name:'孙八',fraction_english:30,fraction_math:20,fraction_chinese:10},
            ],
            english:0,
            math:0,
            chinese:0,
            
        },
        methods: {
            del(index){
                this.all.splice(index,1)
            },
            edit(index){
                this.all[index].fraction_english = this.english
                this.all[index].fraction_math = this.math
                this.all[index].fraction_chinese = this.chinese}
        },
        computed:{
            pingfen(){
                var sum = 0;
                for(var i = 0;i<this.all.length;i++){
                    sum += this.all[i].fraction_english+this.all[i].fraction_math+this.all[i].fraction_chinese;
                }
                return sum/this.all.length; 
            }
        }

    })
</script>
</script>